@font-face
  font-family 'num'
  src url('~assets/font/num.ttf') format('truetype')
  font-weight normal
  font-style normal
@font-face
  font-family 'num1'
  src url('~assets/font/num1.ttf') format('truetype')
  font-weight normal
  font-style normal
.num
  font-family 'num'
.num1
  font-family 'num1'
-webkit-scrollbar
  width 9px
  height 9px
  background-color transparent
.q-tooltip--style
  font-size 14px
  max-width 600px
.q-scrollarea__thumb, -webkit-scrollbar-thumb
  border-radius 9px
  opacity .4
  background-color $primary
::-webkit-scrollbar
  width 5px
  height 5px
::-webkit-scrollbar-thumb
  border-radius 5px
  opacity .4
  background-color #ccc
html, body
  background $base
  background-size cover
  color $dark
  font-family 'Roboto', '-apple-system', 'Helvetica Neue', 'Microsoft YaHei', Helvetica, Arial, sans-serif
h1, h2, h3, h4, h5, h6
  margin 0
.list-move
  transition transform 1s ease-out
.list_shorter-move
  transition transform .2s ease-out
.ani
  transition all .4s ease-out
.ani_slow
  transition all 1s ease-out
a
  color $primary
.view_title
  display flex
  align-items center
  height 40px
  color $white
  font-size 16px
  background $primary
.cc-border
  border 1px solid rgba(0, 0, 0, .24)
  .q-table
    border-width 0
.cc-select-none
  user-select none
.cc-font
  color rgba(0, 0, 0, .65)
  font-size 14px
  line-height 22px
.cc-dyn-search-label
  max-width 80px !important
  .q-item__label
    white-space normal !important
.cc-none-select
  -webkit-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none
.cc-dialog
  background $white
  min-width 780px
  height 100vh
  pointer-events all
  .cc-dialog-title
    display flex
    align-items center
    height 50px
    color $white
    font-size 18px
    background $primary
  .cc-dialog-form
    >div
      min-height 55px
    h5
      font-size 14px
      >ifirst-child
        transform translate(0, -2px)
.cross_table_border
  border-radius 0 !important
  border 1px $light solid
.q-field--auto-height.q-field--labeled
  .q-field__control-container
    padding-top 8px
.q-item__section--side
  padding-right 0
.q-field--auto-height.q-field--dense
  .q-field__control, .q-field__native
    min-height 36px
.q-field--readonly, .q-field--disabled
  color rgba(0, 0, 0, .25)
  background #f5f5f5
  cursor not-allowed
.q-table th
  font-size 14px
.q-tab__label
  font-size 14px
.q-table
  border solid rgba(0, 0, 0, .12)
  border-width 0 1px 1px 1px
  thead
    th, td
      position sticky
      top 0
      font-size 14px
      transition none
      opacity 1
      z-index 1
      color $t-dark
    tr
      background #e3efff
      height 40px
      th
        padding 0 8px !important
        position sticky
        top 0
        z-index 1
  tbody
    tr:nth-child(even)
      background #f3f8fe
    td
      font-size 14px
      padding 0 8px
      height 40px
.q-field--readonly .q-field__control:before
  border-style solid !important
.dialog_parent
  background $white
  pointer-events all
.dialog_card
  @extend .dialog_parent
  width 80vw
  height 85vh
.dialog_half
  @extend .dialog_parent
  min-width 50vw
  height 60vh
.dialog_large
  @extend .dialog_parent
  min-width 90vw
  height 90vh
.dialog_full
  @extend .dialog_parent
  min-width 100vw
  height 100vh
.dialog_form
  h5
    font-size 14px
    >ifirst-child
      transform translate(0, -2px)
.q_b_toggle
  width 100%
  border 1px $primary solid
  color $primary
  box-shadow unset
  >button
    flex 999 1 0%
    .q-btn__wrapper
      padding 0
.q_b_tabs
  border-bottom 1px $light solid
  .q-tab--active
    color $primary
.toggle_btn
  border 1px $primary solid
  color $t-grey
.text-t-dark
  color $t-dark
.bg-t-dark
  background $t-dark
.text-t-grey
  color $t-grey
.bg-t-grey
  background $t-grey
.cc-header
  align-items center
  justify-content space-between
  display flex
  flex-wrap wrap
  margin-bottom 16px
.grid-item-select
  flex 1
  border-style dashed
  border-width 2px
  border-color #00bfff
  touch-action none
.cc-admin
  .q-field--auto-height.q-field--labeled
    .q-field__control-container
      padding-top 8px
  .q-item__section--side
    padding-right 0
  .q-item__label
    width 80px
    text-align right
    white-space nowrap
  >div, .cc-view-catalog
    background-color #ffffff
    margin 8px
    padding 8px
    box-shadow 0 1px 5px rgba(0, 0, 0, .3)
    .cross_table
      border-radius 0 !important
      padding 8px
  .cc-view-catalog
    margin 8px 0 8px 8px
  .q-field--auto-height.q-field--dense
    .q-field__control, .q-field__native
      min-height 36px
  .q-table th
    font-size 14px
    font-weight bold
  .q-tab__label
    font-size 14px
  .q-btn-group
    height 40px
.cc-table-index
  width 80px
.cc-cursor-move
  cursor move
.cc-brand-color
  width 60px
  height 25px
.cc-admin-min
  .q-item__section--side
    padding-right 0
  .q-field--dense
    .q-field__control
      height auto
    .q-field__marginal
      height auto
  .q-field--auto-height.q-field--dense .q-field__control, .q-field--auto-height.q-field--dense .q-field__native
    padding 2px
    min-height 28px
.cc-active-class
  border 1px dashed #1890ff
.cc-un-active-class
  border 1px dashed lightgrey
.cc-shadow-blue
  box-shadow 0 0 6px 0 #1890ff
.cc-pic-opt-btn
  color #fff
  background rgba(0, 0, 0, .47)
  text-align center
.cc-word-wrap
  word-wrap break-word
  white-space normal
/* 滚动条宽度 */
-webkit-scrollbar
  width 7px
  height 3px
/* 滚动条的滑块 */
-webkit-scrollbar-thumb
  background-color lightskyblue
  border-radius 3px
.components-border
  border 1px solid #f1e8e8
.components-list
  box-sizing border-box
  height 100%
  .components-item
    display inline-block
    width 48%
    margin 1%
    transition transform 0ms !important
.components-draggable
  padding-bottom 20px
.components-title
  font-size 14px
  color #222
  margin 6px 2px
  .svg-icon
    color #666
    font-size 18px
.components-body
  padding 8px 10px
  background $selectedColor
  font-size 12px
  cursor move
  border 1px dashed $selectedColor
  border-radius 3px
  .svg-icon
    color #777
    font-size 15px
  &:hover
    border 1px dashed #787be8
    color #787be8
    .svg-icon
      color #787be8
.dynamic-form-item-label
  vertical-align middle
  font-size 14px
  line-height 40px
  padding 0 12px 0 0
  -webkit-box-sizing border-box
  box-sizing border-box
.drawing-table-item
  padding 0 12px !important
  .dynamic-form-item-label
    background-color #f2f3f5
  .dynamic-form-item-field
    padding 0 5px 0 0
  .drawing-item .dynamic-form-item
    padding 0
.drawing-item, .drawing-row-item
  & > .drawing-item-copy, & > .drawing-item-delete
    display none
    position absolute
    top -10px
    width 22px
    height 22px
    line-height 22px
    text-align center
    border-radius 50%
    font-size 12px
    border 1px solid
    cursor pointer
    z-index 1
  & > .drawing-item-copy
    right 56px
    border-color $lighterBlue
    color $lighterBlue
    background #fff
    &:hover
      background $lighterBlue
      color #fff
  & > .drawing-item-delete
    right 24px
    border-color #F56C6C
    color #F56C6C
    background #fff
    &:hover
      background #F56C6C
      color #fff
.drawing-item
  position relative
  cursor move
  &.unfocus-bordered:not(.active-from-item) > div:first-child
    border 1px dashed #ccc
  .dynamic-form-item
    padding 0 10px 5px
.dynamic-form-item-cmp
  min-height 40px
  display flex
  flex-direction row
  flex-wrap nowrap
  align-items center
.display-item
  &.unfocus-bordered:not(.active-from-item) > div:first-child
    border 1px dashed #ccc
  .dynamic-form-item
    padding 0 10px 5px
  position relative
.drawing-row-item
  position relative
  cursor move
  box-sizing border-box
  border 1px dashed #ccc
  border-radius 3px
  padding 0 2px
  margin-bottom 15px
  .drawing-row-item
    margin-bottom 2px
  .el-col
    margin-top 22px
  .dynamic-form-item
    margin-bottom 0
  .drag-wrapper
    min-height 120px
  &.active-from-item
    border 1px dashed $lighterBlue
  .component-name
    position absolute
    top 0
    left 0
    font-size 12px
    color #bbb
    display inline-block
    padding 0 6px
.drawing-board
  height 100%
  position relative
  .components-body
    padding 0
    margin 0
    font-size 0
  .sortable-ghost
    position relative
    display block
    overflow hidden
    &::before
      content ' '
      position absolute
      left 0
      right 0
      top 0
      height 3px
      background rgb(89, 89, 223)
      z-index 2
  .components-item.sortable-ghost
    width 100%
    height 60px
    background-color $selectedColor
  .active-from-item
    & > .dynamic-form-item
      background $selectedColor
      border-radius 6px
    & > .drawing-item-copy, & > .drawing-item-delete
      display initial
    & > .component-name
      color $lighterBlue
.dynamic-setting-panel
  width 450px
.map_content
  background #051234
  height 300px
.map_m_c
  width 30px
  text-align center
  border-radius 4px
  background rgba(0, 0, 0, .4)
  border 1px $sky solid
  overflow hidden
  a
    display block
    font-size 20px
    line-height 20px
    padding 4px 0
    border-top 1px $sky solid
    color $light
    cursor pointer
    &:hover
      background $sky
      color $dark
    &:active
      color $white
  a:first-child, div:first-child
    border 0
.map-scale
  margin 0 40px 2px 0
  padding-top 8px
  background rgba(0, 0, 0, .4)
  div
    height 9px
    border 1px solid $sky
    border-top 0
    font-size 12px
    line-height 0
    color $light
.maptalks-msgBox
  position relative
  background rgba(0, 0, 0, .8)
  border 1px $sky solid
  border-radius 4px
  color $light
  width fit-content !important
  margin-bottom -110px
.maptalks-msgBox h2
  height 30px
  width fit-content
  white-space nowrap
  line-height 30px
  font-weight bold
  font-size 14px
  padding 0 20px 0 9px
  margin 0
.maptalks-msgBox a.maptalks-close
  display block
  position absolute
  right 2px
  top 9px
  width 13px
  height 13px
  background url('~assets/infownd-close.png') no-repeat
.maptalks-msgBox a.maptalks-close:hover
  background url('~assets/infownd-close-hover.png') no-repeat
.maptalks-msgBox .maptalks-msgContent
  width fit-content
  white-space nowrap
  padding 4px 9px
  font-size 12px
.maptalks-msgBox em.maptalks-ico
  display block
  width 0
  height 0
  position absolute
  left 50%
  margin-left -5px
  top -10px
  border 9px rgba(0, 0, 0, 0) solid
  border-top 0
  border-bottom-color $sky
.cc-sticky-table
  tr th
    position sticky
    z-index 20
  /* 第一行标题头设置为固定顶部 */
  thead tr:first-child > th
    top 0
    z-index 30
  thead tr:nth-child(2) > th
    top 40px
    z-index 30

.multiple-head-th
  border-left 1px solid rgba(0, 0, 0, .12) !important
  border-left-width 1px
@media screen and (max-width 600px)
  .q-table--col-auto-width
    width 0 !important
  .q-table
    border solid rgba(0, 0, 0, 0) !important
    border-width 0 1px 1px 1px !important
  .q-table tbody td:after
    background none
  .q-table--no-wrap td
    .q-select span
      word-wrap break-word
      white-space normal
  .cc-admin >div .cross_table, .cc-admin .cc-view-catalog .cross_table
    border-radius 0 !important
    padding 0 0 !important
  .q-tab-panel
    padding 0 !important
  .display-item
    width 100% !important
  table
    padding 5px !important
    thead
      display none !important
    tbody
      td
        display block
        text-align left !important
        font-size 14px !important
        border-bottom 0 dotted #ccc !important
        border-left 0 !important
        width 100% !important
        height 100% !important
        padding-bottom 4px !important
        div
          max-width 100% !important
          min-width 24px
          word-wrap break-word
          white-space normal
        .q-select .q-field__input
          min-width 10px !important
      tr
        margin-bottom 10px !important
        display block
        background rgba(0, 0, 0, .03)
      td:before
        content attr(data-label) '：'
        min-width 70px !important
        float left !important
        text-align right !important
        font-weight bold !important
        position static !important
      td, td:before
        background-color transparent !important
        min-height 35px !important
        line-height 35px !important
    .q-btn__wrapper
      padding 0 14px !important
      min-height 24px !important
      .q-btn__content
        .on-left
          margin-right 2px !important
.table-td-th-padding-dense
  .q-table
    thead
      tr
        th
          padding 0 2px !important
    tbody
      td
        padding 0 2px !important
.drawing-custom-container
  user-select none
  .drawing-custom-context-menu
    margin 5px 0
    background-color #fff
    font-size 12px
    ul
      margin 0
      padding 0
      list-style none
      display inline
    li
      display inline-block
      text-align center
      border 1px solid rgba(0, 0, 0, .15)
      margin-right 2px
      a
        padding 5px 20px
        display block
        color #666
        &.disabled
          cursor not-allowed
        &:hover:not(.disabled)
          background-color #2dc3e8
          color #fff
  .drawing-custom-table
    border-collapse collapse
    width 100%
    .drawing-custom-table-body
      .drawing-custom-table-list
        height 50px
        line-height 50px
        td
          padding 0 10px
          border 1px solid #dfe6ec
          &.selected
            background #d4e7f5
  .drawing-custom-table-item
    min-width 50px
.cc-dyn-search-date-range
  min-width 350px !important
  max-width 350px !important